import 'package:flutter/material.dart';
import '../utils/base.dart';
import 'styles.dart';

class XTabBar extends StatefulWidget {
  List<XTab> tabs;
  List<Widget> contents;

  XTabBar({Key key, this.tabs, this.contents}) : super(key: key);

  _XTabBarState createState() => _XTabBarState(tabs, contents);
}

class _XTabBarState extends State<XTabBar> {
  final List<XTab> tabs;
  final List<Widget> contents;

  int tabIndex = 0;

  _XTabBarState(this.tabs, this.contents);

  @override
  Widget build(BuildContext context) {
    Widget _tabView() {
      return Container(
        height: Design.px(110),
        width: double.infinity,
        decoration: BoxDecoration(color: HexColor("FFFFFF"), boxShadow: [
          new BoxShadow(
              color: HexColor("f1f1f1"),
              offset: new Offset(Design.px(5), Design.px(10)),
              blurRadius: Design.px(5),
              spreadRadius: Design.px(1))
        ]),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: tabs
              .asMap()
              .map((index, value) => MapEntry(
                  index,
                  XTabView(
                    title: value.title,
                    tabIndex: index,
                    isActive: index == tabIndex,
                    onPressed: (ti) {
                      this.setState(() {
                        tabIndex = ti;
                      });
                    },
                  )))
              .values
              .toList(),
        ),
      );
    }

    return Container(
      child: Column(
        children: <Widget>[_tabView(), XTabContentView(contents[tabIndex])],
      ),
    );
  }
}

class XTab {
  final String title;
  XTab(this.title);
}

class XTabView extends StatelessWidget {
  final String title;
  final int tabIndex;
  final bool isActive;
  final void Function(int) onPressed;
  const XTabView(
      {Key key, this.title, this.tabIndex, this.isActive, this.onPressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle _textStyle() {
      return TextStyle(
          fontSize: Design.px(40),
          color: isActive ? HexColor('ff6666') : HexColor('666666'));
    }

    return Container(
      width: Design.px(275),
      child: FlatButton(
        onPressed: () {
          this.onPressed(this.tabIndex);
        },
        child: Stack(
          overflow: Overflow.visible,
          alignment: Alignment.center,
          children: <Widget>[
            Text(title, style: _textStyle()),
            Positioned(
              bottom: -Design.px(25),
              child: Container(
                height: Design.px(6),
                width: Design.px(90),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: isActive ? [
                      HexColor('ff9874'),HexColor('fe5d68'),
                    ]: [
                      Colors.transparent
                    ]
                  )
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class XTabContentView extends StatelessWidget {
  final Widget child;

  const XTabContentView(this.child, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Expanded(
        child: child,
      ),
    );
  }
}
